<%--
 救灾分析页面
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>救灾分析</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <!-- 引入JQuery  bootstrap.js-->
    <style>

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button{
            -webkit-appearance: none !important;
            margin: 0;
        }


    </style>
    <script src="../../../js/echarts.min.js"></script>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>

<%--    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>--%>
</head>
<body>
<!-- 顶栏 -->
<jsp:include page="top.jsp"></jsp:include>

<div class="panel panel-default">
    <div class="panel-body" width="100%">
        <div><jsp:include page="analysis.jsp"></jsp:include></div>
<div>
<table  border="1" width="70%">

    <tr >
        <th>气体成分</th>
        <th>气体浓度</th>
        <th>更新</th>
        <th>删除</th>
    </tr >


    <tr >
        <th >
            <!-- Small button group -->
            <div  class="btn-group"  >
                <button style="margin-left: 100%"  class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span  class="numberName" >  CH4</span> <span class="caret"></span>
                </button>
            </div>
        </th>

        <th>
            <div class="input-group" style="width: 100%">
                <input type="number" onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                  id="number1"  value="12"   class="form-control" placeholder="" aria-describedby="basic-addon1">
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">更新</button>
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">删除</button>
            </div>
        </th>

    </tr >


<tr>
    <th>
        <!-- Small button group -->
        <div class="btn-group">
            <button style="margin-left: 115%" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="numberName" >   CO</span> <span class="caret"></span>
            </button>
        </div>
    </th>

    <th>
        <div class="input-group" style="width: 100%">
            <input type="number" onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                   id="number2"  value="6"   class="form-control" placeholder="" aria-describedby="basic-addon1">
        </div>
    </th>

    <th>
        <div class="input-group">
            <button type="button" class="btn btn-default">更新</button>
        </div>
    </th>

    <th>
        <div class="input-group">
            <button type="button" class="btn btn-default">删除</button>
        </div>
    </th>

    </tr>


    <tr>
        <th>
            <!-- Small button group -->
            <div class="btn-group">
                <button style="margin-left: 124%" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="numberName" >  H2 </span><span class="caret"></span>
                </button>
            </div>
        </th>

        <th>
            <div class="input-group" style="width: 100%">
                <input type="number"  onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                   id="number3" value="9"   class="form-control" placeholder="" aria-describedby="basic-addon1">
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">更新</button>
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">删除</button>
            </div>
        </th>

    </tr>

    <tr>
        <th>
            <!-- Small button group -->
            <div class="btn-group">
                <button style="margin-left: 124%" class="btn btn-default btn-sm dropdown-toggle cadd" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="numberName" >   N2</span> <span class="caret"></span>
                </button>
            </div>
        </th>

        <th>
            <div class="input-group" style="width: 100%">
                <input type="number" onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                       id="number4"  value="2"   class="form-control" placeholder="" aria-describedby="basic-addon1">
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">更新</button>
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">删除</button>
            </div>
        </th>

    </tr>


    <tr>
        <th>
            <!-- Small button group -->
            <div class="btn-group">
                <button style="margin-left: 124%" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   <span class="numberName" > O2</span> <span class="caret"></span>
                </button>
            </div>
        </th>

        <th>
            <div class="input-group" style="width: 100%">
                <input type="number" onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
                       id="number5" value="10"   class="form-control" placeholder="" aria-describedby="basic-addon1">
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">更新</button>
            </div>
        </th>

        <th>
            <div class="input-group">
                <button type="button" class="btn btn-default">删除</button>
            </div>
        </th>

    </tr>

</table>
</div>
    </div>
    <div align="center">
    <button id="countNumber"  type="button" class="btn btn-default">计算</button>
    </div>
    <div align="center">
<div id="container" style="height: 50%;width: 50%"></div>
    </div>
</div>


</body>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var x1,y1,x2,y2,x3,y3;
    var option;

    option = {
        xAxis: {},
        yAxis: {},
        series: [
            {
                data: [
                ],
                type: 'line'
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);


        $("#countNumber").click(function (){
            var pattern = /[^\-?\d.]/g;
            var form2=   $(".form-control");
            var form3=$(".numberName");
            var numbers=[];
            for(var i=0;i<form2.length;i++){
                if(!form2[i].value.trim().replace(pattern,'')) {
                    alert(form3[i].innerHTML+"不能为空");
                    return ;
                }
                numbers[i]=form2[i].value;
            }
            x1=numbers[0];y1=numbers[1];x2=numbers[2],y2=numbers[3],x3=numbers[4];y3=numbers[4]+numbers[0];
console.log(numbers);
            option = {
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        data: [
                            [x1, y1],
                            [x2, y2],
                            [x3, y3],
                            [x1, y1]
                        ],
                        type: 'line'
                    }
                ]
            };


            option && myChart.setOption(option);
        })

$(function (){
    $("#countNumber").click();
})


</script>
</html>
